
<!-- 设备维修页面 -->
<template>
  <!-- 列表展示 -->
  <div class="maintenance-content">
    <!-- 搜索查询模块 -->
    <div class="maintenance-content-search">
      <div class="mb-4">
        <el-button type="primary"
                   round
                   @click="changeClass(1)">全部卡片</el-button>
        <el-button type="success"
                   round
                   @click="changeClass(2)">奖项</el-button>
        <el-button type="warning"
                   round
                   @click="changeClass(3)">奖项等级</el-button>

        <el-button type="primary"
                   round
                   @click="changeClass(4)">随机</el-button>
        <!-- <el-button type="primary" round @click="changeClass(5)">随机1</el-button> -->
      </div>
    </div>

    <el-divider border-style="dashed" />

    <!-- 表格 -->
    <div style="width: 100%; height: 80%">
      <CardsTable ref="cardsTableRef"
                  v-if="currentClass === 1"></CardsTable>
      <PrizesTable ref="prizesTableRef"
                   @submitFormAdmin="submitFormAdmin"
                   v-if="currentClass === 2 ||currentClass === 5 "></PrizesTable>
      <LevelTable ref="levelTableRef"
                  @submitFormAdmin="submitFormAdmin"
                  v-if="currentClass === 3"></LevelTable>
    </div>
    <el-divider border-style="dashed" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watchEffect } from 'vue'
import CardsTable from '../components/CardsTable.vue'
import LevelTable from '../components/LevelTable.vue'
import PrizesTable from '../components/PrizesTable.vue'

/* 接口 */
import apiHttpFn from '@/api/index'

import webSocket from '@/lib/webSocket.js' // 引入新建的webSocket.js文件

const websocketUrl = `ws://121.41.178.95:10001`
const { sendMessage, messages } = webSocket(websocketUrl, 10000, 5)

// 当前的后台
const currentClass = ref(1)

const cardsTableRef = ref()
const prizesTableRef = ref()
const levelTableRef = ref()

// 监听ws数据
watchEffect(() => {
  if (messages.value) {
    // debugger
    // 打开对话框时，发送消息给服务器
    console.log(messages.value)
    if ('front' === messages.value?.type) {
      ElMessage.success(messages.value?.data)
      // 刷新页面
      // debugger
      setTimeout(() => {
        initData()
      }, 100)
    }
  }
})

const submitFormAdmin = () => {
  const wsData = {
    type: 'admin',
    data: 'edit/add/reset',
  }
  sendMessage(JSON.stringify(wsData))
}
const initData = () => {
  // 获取数据
  cardsTableRef.value?.getLevesData()
  prizesTableRef.value?.getLevesData()
  levelTableRef.value?.getLevesData()
}

const changeClass = (numVal) => {
  if (numVal === 4) {
    const tokenData = localStorage.getItem('GIS_USER_LOGIN_IDSTR') || ''
    apiHttpFn.randomPrizesListHttp(tokenData).then((res) => {
      ElMessage.success(res.data.message)
      // 刷新页面
      // cardsTableRef.getLevesData()
      initData()
      // setTimeout(() => {
      //   window.location.reload()
      // }, 500)
    })
    return
  }
  // if (numVal === 5) {
  //   const tokenData = localStorage.getItem('GIS_USER_LOGIN_IDSTR') || ''
  //   apiHttpFn.changePrizes(tokenData).then((res) => {
  //      initData()

  //   })
  // }
  currentClass.value = numVal
  console.log(numVal)
}

onMounted(() => {})
</script>


<style lang="scss" scoped>
.maintenance-form {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}
.el-divider__text {
  font-size: 16px;
  color: #409eff;
}

.maintenance-content {
  padding: 30px;
  // background: red;
  height: 100vh;
  &-search {
    // background: red;
    // margin: 20px;
    height: 5%;
  }
}
</style>
